<template>
  <div class="container">
    <h3 align="center">商户列表</h3>
    <div class="create-btn">
      <el-button type="primary" plain @click.native="onCreate">创建商户</el-button>
    </div>
    <el-table
      :data="corpList"
      v-loading="corpLoading"
      fit
      highlight-current-row
      style="width: 100%;"
      :height="tableHeight"
      @row-click="rowClick"
    >
      <el-table-column align="center" label="商户ID">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商户名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商户编码">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商户地址">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{!scope.row.createTime?'':scope.row.createTime.slice(0,16)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="180px">
        <template slot-scope="scope">
          <el-button @click.native.stop="onAdmin(scope.row)" size="small">管理员</el-button>
          <el-button
            icon="el-icon-delete"
            size="small"
            type="warning"
            @click.native.stop="onDelete(scope.row)"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <AddCorp v-if="showAddCorpDialog" @addCorpDialog="onAddCorpDialog" />
    <AdminDialog v-if="showAdminDialog" @adminDialog="onAdminDialog" :options="currentRow"/>
    <CorpDetail v-if="showCorpDetailDialog" />
    <UpdateCorpInfo v-if="showUpdateCorpInfoDialog" @updateCorpDialog="onUpdateCorpDialog" :options="currentRow"/>
  </div>
</template>
<script>
import {
  getCorporationAll, // 获取商户列表
  deleteCorp, // 删除商户
  getCorporationByIds, // 根据id获取商户信息
} from "@/api/corpConfig";
import {
  AddCorp,
  AdminDialog,
  CorpDetail,
  UpdateCorpInfo
} from "./components/index";

export default {
  components: {
    AddCorp,
    AdminDialog,
    CorpDetail,
    UpdateCorpInfo
  },
  data() {
    return {
      corpList: [], // 商户列表
      adminList: [], // 管理员列表
      currentRow: {}, // 当前行数据
      corpLoading: false,
      showAddCorpDialog: false,
      showAdminDialog: false,
      showCorpDetailDialog: false,
      showUpdateCorpInfoDialog: false,
      clientHeight: document.body.clientHeight, // 浏览器高度
      tableHeight: 0 // table高度
    };
  },
  created() {
    this.tableHeight = this.clientHeight - 200 + "px";
    this.getCorpList();
  },
  mounted() {
    let self = this;
    window.onresize = function windowResize() {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      self.tableHeight = document.body.clientHeight - 200 + "px";
    };
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    // 获取商户列表
    getCorpList() {
      this.corpLoading = true;
      getCorporationAll().then(
        res => {
          this.corpList = res.data;
          this.corpLoading = false;
        },
        err => {
          this.corpLoading = false;
        }
      );
    },
    // 创建商户
    onCreate() {
      this.showAddCorpDialog = true;
    },
    // 管理员
    onAdmin(row) {
      this.currentRow = Object.assign({}, row)
      this.showAdminDialog = true
    },
    // 移除
    onDelete(row) {
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(_ => {
          deleteCorp([row.id]).then(
            res => {
              this.corpList.forEach((item, index) => {
                if (item.id === row.id) {
                  this.corpList.splice(index, 1)
                }
              })
              
              this.$message({
                type: "success",
                message: "操作成功"
              });
            },
            err => {
              this.$message({
                type: "warning",
                message: "操作失败,请重新操作"
              });
            }
          );
        })
        .catch(_ => {});
    },
    // 行点击事件
    rowClick(row) {
      this.currentRow = Object.assign({}, row)
      this.showUpdateCorpInfoDialog = true
    },
    // 监听创建商户弹窗
    onAddCorpDialog(formData) {
      this.showAddCorpDialog = false;
      if (!formData.id) {
        return
      }
      this.corpList.unshift(formData);
    },
    // 监听修改商户弹窗
    onUpdateCorpDialog(formData) {
      this.showUpdateCorpInfoDialog = false;
      this.corpList.forEach(item => {
        if (item.id === formData.id) {
          this.$set(item, 'name', formData.name)
          this.$set(item, 'address', formData.address)
        }
      })
    },
    // 监听管理员弹窗
    onAdminDialog() {
      this.showAdminDialog = false
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .create-btn {
    text-align: right;
  }
}
</style>
